<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
	
</head>
<style>
    *{
		margin: 0;
		padding: 0;
	}
    .a li{
        float: right;
        width: 65px;
        list-style-type:none;
        text-align: center;
        background:rgb(173, 241, 243);
    }
    .b li{
        float: left;
        color: white;
        width: 62.3px;
        height: 35px;
        list-style-type:none;
        text-align: center;
        
        background:rgb(250, 137, 9);
        display: table-cell;
        vertical-align:middle;
    }
    #icon{
        padding: 0px 80%;
        position: relative;
        top:5px;
        right: 100px;
    }
    #logo{
        position: relative;
        top:50px;
        left:60px;
    }
    #c{
        position:relative;
        right: 52px;
    }
    #banner{
        
        position: relative;
        top:10px;
        left:60px;
    }
    #text{
        border-width: 2px;
        border-color: green;
        border-style:solid;
        width: 1060px;
        height: 380px;
        position: relative;
        top:20px;
        left:60px;
        
    }
    #bg_bang{
        float: left;
        margin:15px -13px;        
    }
    #bookNo1{
        position: relative;
        top: 70px;
        right: 190px;
        z-index: 5;
    }
    #book-01{
        position: relative;
        top:20px;
        z-index: 2;
    }
    #bookNo2{
        position: relative;
        left: 565px;
        bottom: 560px;
        z-index: 5;
    }
    #book-02{
        position: relative;
        left: 530px;
        bottom: 480px;
        z-index: 2;
    }
    #bookNo3{
        position: relative;
        left: 430px;
        bottom: 430px;
        z-index: 5;
    }
    #book-03{
        position: relative;
        left: 400px;
        bottom:360px;
        z-index: 2;
    }
    #shawdow{
        position: relative;
        left: 260px;
        bottom: 240px;

    }
    #shawdow h3{
        height: 40px;
    }
    #shawdow p{
        height: 25px;
        font-size: 12px;
    }
    #look{
        position: relative;
        left:670px;
        bottom: 600px;
    }
    #look h3{
        height: 40px;
    }
    #look p{
        height: 25px;
        font-size: 12px;
    }
    #icp{
        position: relative;
        top: 3px;
        left: 240px;
    }
    #icp img{
        position: relative;
        top: 17px;
    }
    #icp span{
        font-size: 12px;
    }
</style>

<body>
        <img id="logo" src="img/logo.jpg"  />
        <img id="icon" src="img/icon_count.png" />
        <div id="c" style="margin:0px 20px">
            <ul class="a">
                <li>都看阅读</li>
                <li>数字馆</li>
                <li>当当优品</li>
                <li>尾品会</li>
                        
            </ul>
        </div>
        <div style="margin:30px 60px">
            <ul class="b">
                <li>首页</li>
                <li>图书</li>
                <li>音像</li>
                <li>童装</li>
                <li>服装</li>
                <li>鞋靴</li>
                <li>运动</li>
                <li>箱包</li>
                <li>美妆</li>
                <li>珠宝</li>
                <li>家居</li>
                <li>食品</li>
                <li>酒</li>
                <li>手机</li>
                <li>数码</li>
                <li>电脑</li>
                <li>家电</li>

            </ul>
        </div>
        <img id="banner" width="1060" src="img/banner.png" >
        <div id="text">
            <img id="bg_bang" src="img/bg_bang.gif" >
            <br>
            <img id="bookNo1" src="img/bookNo1.gif" >
            <br>
            <img id = "book-01" src="img/book-01.jpg" >
            <div id="shawdow">
                    <h3 style="color:blue">偷影子的人</h3>            
                    <p>作者：[法]马克·李维(Marc Leyy)著 </p>
                    <p>出版社：湖南文艺出版社 </p>
                    <p>当当价：<span style="color:red">￥17.90 </span></p>
                    <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，</p>
                    <p>我童年时的小女孩，今日蜕变成了女人，一段青梅竹 </p>
                    <p>马的回忆，一个时间之神没有应允的愿望。一个老</p>
                    <p>是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊</p>
                    <p>能力而强大：他能“偷别人的影子”</p>
            </div>
            
            <img id="bookNo2" src="img/bookNo2.gif" >
            <img id = "book-02" src="img/book-02.jpg" >
            <img id="bookNo3" src="img/bookNo3.gif" >
            <img id = "book-03" src="img/book-03.jpg" >

            <div id="look">
                    <h3 style="color:blue">看见(央视知名记者、主持人柴静：十年个人</h3>            
                    <h3 style="color:blue">成长的告白，中国社会变迁的备忘</h3>            
                    <p>作者：柴静 著 </p>
                    <p>出版社：广西师范大学出版社 </p>
                    <p>当当价：<span style="color:red">￥17.90  </span>
                                <span style="color:greenyellow"> 7.4折 </span>
                    </p>
                    
                    <h3 style="color:blue">改变孩子先改变自己</h3>            
                    <p>作者：贾容韬 嘉懿 著 </p>
                    <p>出版社：作家出版社 </p>
                    <p>当当价：<span style="color:red">￥17.90 </span>
                        <span style="color:greenyellow"> 7.4折 </span>
                    </p>
                    

            </div>
        </div>
        <p id="icp">
                <span>Copyright(C) 当当网 2004-2017,All Rights Reserved</span>
                <img src="img/validate.gif" >
                <span>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>>
        
        </p>
        

</body>

</html>